<template>
  <div>
    <div class="home">
      <div class="aa">
        <input v-model="username" type="text" placeholder="请输入用户名" name="username" ref="inp" class="in1">
        <br>
        <input v-model="password" type="password" placeholder="请输入密码" name="password" ref="inp1" class="in2" >
        <br>
        <!--<input type="password" placeholder="请输入密码" required >-->
        <button type="submit" @click="zc">登录</button>

      </div>
    </div>

  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    data: function () {
      return {
        username:'',
        password:''

      }
    },
    components: {},
    methods: {
      zc() {
        var username = $(this.$refs.inp).val();
        var password = $(this.$refs.inp1).val();

        axios.get('/api/login', {
          params:{
            username: this.username,
            password: this.password
          }
        }).then((val) => {
          console.log(val);
          if(val.data.error === 0){
            alert(val.data.msg);
            setTimeout(function () {
              this.location.href = '#/'
            },1000)
          }else{
            alert(val.data.msg)
          }
        }).catch((err) => {
          console.log(err)
        })



      }
    }
  }
</script>

<style scoped>
  .home{
    width: 100%;
    height: 500px;
    background: url("https://s17.mogucdn.com/p2/170105/upload_541i9di2b3icf9j13f24e0bg7b1i6_1920x600.png");
    position: relative;
  }
  .aa{
    width: 350px;
    height: 350px;
    background: #fedad8;
    padding-top: 50px;
    position: absolute;
    right: 200px;
    top:100px;
  }
  .aa input{
    border-radius: 3px;
    width: 200px;
    height: 30px;
    margin: 10px 0;
    border: none;
  }
  .aa button{
    width:100px ;
    height: 30px;
    margin-top: 20px;
    border: none;
  }
  .aa button:hover{
    background: red;
  }
</style>
